<template>
    <div>
        <breadcrumb :routerList="routerList"></breadcrumb>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="170px" class="demo-ruleForm">
            <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="ruleForm.goodsName" class="input" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="商品副名称">
                <el-input v-model="ruleForm.subGoodsName" class="input" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="虚拟产品">
                <el-switch
                    v-model="isVpd"
                    @change="isVpdChange"
                    :disabled="isDisabled"
                >
                </el-switch>
            </el-form-item>
            <el-form-item label="销售价格（元）" prop="price">
                <el-input type="number" v-model="ruleForm.price" suffix-icon="el-icon-coin" class="input" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="原销售价格（元）" prop="old_price">
                <el-input type="number" v-model="ruleForm.old_price" suffix-icon="el-icon-coin" class="input" :disabled="isDisabled"></el-input>
            </el-form-item>
            <!--<el-form-item label="入库价格（元）" prop="old_price">-->
                <!--<el-input type="number" v-model="ruleForm.old_price" suffix-icon="el-icon-coin" class="input" :disabled="isDisabled"></el-input>-->
            <!--</el-form-item>-->
            <el-form-item label="分销商佣金（元）" prop="one_fx_price">
                <el-input type="number" v-model="ruleForm.one_fx_price" class="input" suffix-icon="el-icon-coin"  :disabled="isDisabled">
                    <template slot="append" v-if="ruleForm.price && ruleForm.one_fx_price">占总价的{{Math.round(ruleForm.one_fx_price / ruleForm.price * 10000) / 100.00}}%</template>
                </el-input>
            </el-form-item>
            <el-form-item label="分销商上级佣金（元）" prop="two_fx_price">
                <el-input type="number" v-model="ruleForm.two_fx_price" class="input" suffix-icon="el-icon-coin" :disabled="isDisabled">
                    <template slot="append" v-if="ruleForm.price && ruleForm.two_fx_price">占总价的{{Math.round(ruleForm.two_fx_price / ruleForm.price * 10000) / 100.00}}%</template>
                </el-input>
            </el-form-item>
            <el-form-item label="商品分类" required>
                <el-col :span="6">
                    <el-form-item prop="oneClass">
                        <el-select v-model="ruleForm.oneClass" placeholder="请选择商品一级类别" @change="oneClassChange" clearable :disabled="isDisabled">
                            <el-option :label="item.class_name" :value="item.id" v-for="(item,index) in oneClassList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="1">-</el-col>
                <el-col :span="6">
                    <el-form-item prop="twoClass">
                        <el-select v-model="ruleForm.twoClass" placeholder="请选择商品二级类别" clearable :disabled="isDisabled">
                            <el-option :label="item.class_name" :value="item.id" v-for="(item,index) in twoClassList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="单位" prop="unit">
                <el-input v-model="ruleForm.unit" class="input" :disabled="isDisabled"></el-input>
            </el-form-item>
			<el-form-item label="权值" prop="qz">
				<el-input v-model="ruleForm.qz" class="input" :disabled="isDisabled"></el-input>
			</el-form-item>
            <el-form-item label="商品缩略图" class="is-required">
                <el-upload
                    class="avatar-uploader"
                    action="https://yx.tfnhg.com/oss_upload"
                    :show-file-list="false"
                    :on-success="headSuccess"
                    :on-error="headError"
                    :disabled="isDisabled">
                    <img v-if="ruleForm.headImgUrl" :src="ruleForm.headImgUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span>注：建议上传220px*220px</span>
            </el-form-item>
            <el-form-item label="商品展示图" class="is-required">
                <el-upload
                    action="https://yx.tfnhg.com/oss_upload"
                    list-type="picture-card"
                    :limit="imgLimit"
                    :file-list="ruleForm.bannerImgList"
                    :multiple="true"
                    :on-success="bannerSuccess"
                    :on-preview="bannerPreview"
                    :on-remove="bannerRemove"
                    :on-exceed="bannerExceed"
                    :on-error="bannerError"
                    :before-upload="bannerBeforeUpload"
                    :disabled="isDisabled">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="bannerVisible">
                    <img width="100%" :src="bannerImageUrl" alt="">
                </el-dialog>
                <span>注：建议上传750px*750px；最多可上传五张</span>
            </el-form-item>
            <el-form-item label="上传商品展示视频">
                <el-switch
                        v-model="isUploadVideo"
                        @change="isUploadVideoFun"
                        :disabled="isDisabled"
                >
                </el-switch>
            </el-form-item>
            <el-form-item label="商品展示视频" v-if="isUploadVideo">
                <el-upload class="avatar-uploader"
                           action="https://yx.tfnhg.com/oss_upload"
                           v-bind:on-progress="uploadVideoProcess"
                           v-bind:on-success="handleVideoSuccess"
                           v-bind:before-upload="beforeUploadVideo"
                           v-bind:on-remove="removeVideo"
                           v-bind:show-file-list="false"
                           :disabled="isDisabled"
                >
                    <video v-if="ruleForm.video && !videoFlag"
                           v-bind:src="ruleForm.video"
                           class="avatar video-avatar"
                           controls="controls">
                        您的浏览器不支持视频播放
                    </video>

                    <i v-else-if="!ruleForm.video && !videoFlag"
                       class="el-icon-plus avatar-uploader-icon"></i>
                    <el-progress v-if="videoFlag == true"
                                 type="circle"
                                 v-bind:percentage="videoUploadPercent"
                                 style="margin-top:7px;"></el-progress>
                </el-upload>
                <el-popover
                        placement="top"
                        width="160"
                        v-model="visible">
                    <p>是否确认删除商品展示视频？</p>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                        <el-button type="primary" size="mini" @click="delVideo">确定</el-button>
                    </div>
                    <el-button slot="reference" type="primary" v-if="ruleForm.video && !videoFlag" size="mini" >删除视频</el-button>
                </el-popover>

                <span>注：视频大小不可超过10M，视频格式为MP4；(非必填内容)</span>
            </el-form-item>
            <el-form-item label="商品详情图" class="is-required">
                <el-upload
                    action="https://yx.tfnhg.com/oss_upload"
                    list-type="picture-card"
                    :file-list="ruleForm.contentImgList"
                    :multiple="true"
                    :on-success="contentSuccess"
                    :on-preview="contentPreview"
                    :on-remove="contentRemove"
                    :on-error="contentError"
                    :disabled="isDisabled">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="contentVisible">
                    <img width="100%" :src="contentImageUrl" alt="">
                </el-dialog>
                <span>注：建议上传宽度为750px的图片</span>
            </el-form-item>

            <!--属性部分-->
            <el-form-item label="属性名称"  prop="goodsAttr" class="is-required">
                <el-input
                    placeholder="请输入属性名称"
                    v-model="goodsAttr"
                    :disabled="isDisabled"
                    class="input"
                    @focus="showAddButton"
                    @blur="hideAddButton"
                >
                </el-input>
                <el-button type="primary" plain class="add-attr" v-if="isAddAttr" @click="addNewAttr" :disabled="isDisabled">添加属性</el-button>
            </el-form-item>
            <el-form-item v-for="(item,index) in goodsAttrList" :key="index" :label="item.attr_group_name">
                <el-input placeholder="请输入属性值" v-model="item.attr_name" class="input" :disabled="isDisabled"></el-input>
                <el-button type="primary" plain class="add-attr" @click="addAttrVal(index,item)" :disabled="isDisabled">添加属性值</el-button>
                <el-button type="default" plain class="add-attr" @click="removeAttr(index)" :disabled="isDisabled">删除属性</el-button>
                <el-row v-for="(val,index1) in item.attr_name_list" :key="val">
                    <span>属性值 ：{{val}}</span>
                    <el-button
                            icon="el-icon-delete"
                            size="mini"
                            circle
                            class="add-attr"
                            :disabled="isDisabled"
                        @click="removeAttrVal(index1,index)"
                    >
                    </el-button>
                </el-row>
            </el-form-item>
            <el-row v-if="goodsAttrList.length">
                <table>
                    <thead>
                    <tr class="tr-style">
                        <th v-for="(item,index) in goodsAttrList" :key="index">{{item.attr_group_name}}</th>
                        <th>价格</th>
                        <th>单位</th>
                        <th>库存</th>
                        <th>图片</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(attr,index1) in attrs" :key="index1">
                            <td v-for="(item,index) in attr.attr_list" :key="index" class="td-w">{{item.attr_name}}</td>
                            <td>
                                <input type="number" v-model="attr.price" :disabled="isDisabled">
                            </td>
                            <td>
                                <input type="text" v-model="attr.unit" :disabled="isDisabled">
                            </td>
                            <td>
                                <input type="number" v-model="attr.num" :disabled="isDisabled">
                              </td>
                            <td>
                                <!--<input type="text" v-model="attr.img">-->
                                <div @click="getImgIndex(index1)">
                                    <el-upload
                                            class="avatar-uploader"
                                            action="https://yx.tfnhg.com/oss_upload"
                                            :show-file-list="false"
                                            :on-success="attrImgSuccess"
                                            :on-error="attrImgError"
                                            :disabled="isDisabled">
                                        <img v-if="attr.img" :src="attr.img" class="avatar01">
                                        <i v-else class="el-icon-plus avatar-uploader-icon01"></i>
                                    </el-upload>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')" :disabled="isDisabled" v-if="mainType == 1 ||mainType == 2">提交</el-button>
                <el-button type="success" @click="accept" v-if="mainType == 5">通过</el-button>
                <el-button type="danger" @click="refuse" v-if="mainType == 5">拒绝</el-button>
                <el-button @click="goBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb.vue'

export default {
    components: {breadcrumb},
    data(){
        return{
            isVpd: false,
            isUploadVideo: false,
            goodsAttr:'',//输入属性名称时绑定的值
            attr_list:[],//上传的商品属性格式
            goodsAttrList:[],//商品属性列表
            attrImgUploadIndex:'',//属性图片上传index
            attrs:[],
            routerList: [
                {
                    name: '商品管理',
                    path: ''
                },
                {
                    name: '商品列表',
                    path: '/goodsList'
                },
                {
                    name: '商品',
                    path: ''
                }
            ],
            ruleForm: {
                goodsName: '',
                subGoodsName: '',
                profit_sharing:0,
                oneClass: '',
                twoClass: '',
                price: '',
                old_price:'',
                headImgUrl: '',
                bannerImgList: [],
                contentImgList: [],
                unit:'',
				qz:'',
                one_fx_price:'',
                two_fx_price:'',
                video:''
            },
            rules: {
                goodsName: [
                    { required: true, message: '请输入商品标题', trigger: 'blur' }
                ],
                oneClass: [
                    {  required: true, message: '请选择商品一级分类', trigger: 'change' }
                ],
                twoClass: [
                    { required: true, message: '请选择商品二级分类', trigger: 'change' }
                ],
                price: [
                    { required: true, message: '请输入商品价格', trigger: 'blur' },
                ],
                old_price: [
                    { required: true, message: '请输入商品原价格', trigger: 'blur' },
                ],
                one_fx_price: [
                    { required: true, message: '请输入分销商佣金', trigger: 'blur' },
                ],
                two_fx_price: [
                    { required: true, message: '请输入分销商上级佣金', trigger: 'blur' },
                ],
                goodsAttr:[

                ],
                unit:[
                    {required: true, message: '请输入商品单位', trigger: 'blur' }
                ],
				qz:[
					{required: true, message: '请输入商品权值', trigger: 'blur' }
				],
            },
            bannerImageUrl: '',
            bannerVisible: false,
            contentImageUrl: '',
            contentVisible: false,
            imgLimit: 5,
            oneClassList: [],
            twoClassList: [],
            mainType: '',//4  查看 5 审核  2修改
            isDisabled: false,
            goodsId: '',
            isAddAttr:false,
            videoFlag: false,
            //是否显示进度条
            videoUploadPercent: "",
            //进度条的进度，
            isShowUploadVideo: false,
            //显示上传按钮
            videoForm: {
                showVideoPath: ''
            },
            visible: false,
            removeVideoUrl: ''
        }
    },
    created(){
        this.mainType = this.$route.query.type;
        if(this.mainType == 4 || this.mainType == 5){
            this.isDisabled = true
        }
        if(this.$route.query.list != ''){
            let list = this.$route.query.list
            this.getData(list)
        }
        this.getClass()
    },
    computed:{
        attrList:{
            get:function(){
                let that = this;
                let attrList = this.goodsAttrList;
                let arr = [];
                let attrGroupList = [];
                for(let i in attrList){
                    let attr_list = attrList[i].attr_name_list;
                    attrGroupList.push(attrList[i].attr_group_name);
                    arr.push(attr_list);
                }
                let newArr = this.doExchange(arr);
                let attr_list = [];
                console.log(newArr);
                for(let i in newArr){
                    let attr_group = newArr[i].split(';');
                    let attrList = [];
                    for(let j in attrGroupList){
                        attrList.push({attr_group_name: attrGroupList[j],attr_name:attr_group[j]})
                    }
                    let attrItem = {
                        price:that.ruleForm.price,
                        attr_list:attrList,
                        num:1000,
                        unit:that.ruleForm.unit,
                        img:''
                    }
                    attr_list.push(attrItem)
                }
                console.log(attr_list);
                that.attrs = attr_list;
                return attr_list
            },
            set:function(value){
                this.attr_list = value;
            }
        }
    },
    methods: {
        isUploadVideoFun(val) {
            // console.log(val);
            if(!val) {
                const videoUrlArr = this.ruleForm.video.split('/')
                this.removeVideoUrl = videoUrlArr[videoUrlArr.length - 1]
                // console.log(this.removeVideoUrl);
                this.ruleForm.video = ''
            }
        },
        isVpdChange(val){
            // console.log(val);
            if(val){
                this.ruleForm.profit_sharing = 1
            }else {
                this.ruleForm.profit_sharing = 0
            }
            // console.log(this.ruleForm.profit_sharing);
        },
        newAttr(){
            let that = this;
            let attrList = this.goodsAttrList;
            let arr = [];
            let attrGroupList = [];
            for(let i in attrList){
                let attr_list = attrList[i].attr_name_list;
                attrGroupList.push(attrList[i].attr_group_name);
                arr.push(attr_list);
            }
            let newArr = this.doExchange(arr);
            let attr_list = [];
            console.log(newArr);
            for(let i in newArr){
                let attr_group = newArr[i].split(';');
                let attrList = [];
                for(let j in attrGroupList){
                    attrList.push({attr_group_name: attrGroupList[j],attr_name:attr_group[j]})
                }
                let attrItem = {
                    price:that.ruleForm.price,
                    attr_list:attrList,
                    num:1000,
                    unit:that.ruleForm.unit,
                    img:''
                }
                attr_list.push(attrItem)
            }
            console.log(attr_list);
            that.attrs = attr_list;
        },
        //sku算法
        doExchange(arr) {
            let len = arr.length;
            // 当数组大于等于2个的时候
            if(len >= 2) {
                // 第一个数组的长度
                let len1 = arr[0].length;
                // 第二个数组的长度
                let len2 = arr[1].length;
                // 2个数组产生的组合数
                let lenBoth = len1 * len2;
                //  申明一个新数组,做数据暂存
                let items = new Array(lenBoth);
                // 申明新数组的索引
                let index = 0;
                // 2层嵌套循环,将组合放到新数组中
                for(let i = 0; i < len1; i++) {
                    for(var j = 0; j < len2; j++) {
                        items[index] = arr[0][i] + ";" + arr[1][j];
                        index++;
                    }
                }
                // 将新组合的数组并到原数组中
                let newArr = new Array(len - 1);
                for(let i = 2; i < arr.length; i++) {
                    newArr[i - 1] = arr[i];
                }
                newArr[0] = items;
                // 执行回调
                return this.doExchange(newArr);
            } else {
                return arr[0];
            }
        },

        //显示添加属性按钮
        showAddButton(){
            this.isAddAttr = true;
        },
        //隐藏添加属性按钮
        hideAddButton(){
            if(this.goodsAttr) return;
            this.$message.error('属性名不能为空');
            this.isAddAttr = false;
        },
        //添加新属性按钮
        addNewAttr(){
            let attrGroupName = this.goodsAttr;
            if(attrGroupName){
                this.goodsAttrList.push({attr_group_name:attrGroupName,attr_name:'',attr_name_list:[]})
                this.goodsAttr = '';
                this.isAddAttr = false;
            }else{
                this.$message({
                    showClose:true,
                    message:'属性名称不能为空',
                    type:'error'
                })
            }
        },
        //移除属性
        removeAttr(index){
            console.log(this.goodsAttrList);
            this.goodsAttrList.splice(index,1)
        },
        //添加属性值
        addAttrVal(index,item){
            let attr_name = item.attr_name;
            if(attr_name){
                this.goodsAttrList[index].attr_name_list.push(attr_name);
                console.log(this.goodsAttrList);
                item.attr_name = '';
                this.newAttr()
            }else{
                this.$message.error('请输入属性值！')
            }

        },
        //移除属性值
        removeAttrVal(index,parentIndex){
            this.goodsAttrList[parentIndex].attr_name_list.splice(index,1);
            this.newAttr()
        },
        //上传属性图片获取index
        getImgIndex(index){
            this.attrImgUploadIndex = index;
        },
        //上传属性图片成功
        attrImgSuccess(response, file){
            console.log(response, file)
            this.attrs[this.attrImgUploadIndex].img = response;
            this.$message({
                type: 'success',
                message: '上传图片成功'
            });
        },
        attrImgError(err, file, fileList){//图片上传失败调用
            console.log(err, file, fileList)
            this.$message.error('上传图片失败!');
        },
        getData(list){
            // console.log(list)
            this.goodsId = list.id
            this.isUploadVideo = list.video ? true : false
            this.isVpd = list.profit_sharing==0?false: true
            this.ruleForm.profit_sharing = list.profit_sharing
            this.ruleForm.goodsName = list.product_name
            this.ruleForm.oneClass = list.one_class_id
            this.ruleForm.twoClass = list.two_class_id
            this.ruleForm.headImgUrl = list.head_img
            this.ruleForm.bannerImgList = list.top_img
            this.ruleForm.contentImgList = list.content_img
            this.ruleForm.price = list.price
            this.ruleForm.old_price = list.old_price
            this.ruleForm.subGoodsName = list.title
            this.ruleForm.unit = list.unit
			this.ruleForm.qz = list.qz
            this.ruleForm.video = list.video
			this.ruleForm.one_fx_price = list.one_fx_price
			this.ruleForm.two_fx_price = list.two_fx_price
            this.getTwoClass(list.one_class_id)
            this.setAttr(list.attr)
            this.attrs = list.attr
            // console.log(this.ruleForm)
        },
        //将商品信息属性转为需要的属性
        setAttr(attr){
            let that = this;
            let newArr = [];
            let attr_group_name_list = [];
            for(let i in attr){
                let attr_list = attr[i].attr_list;
                for(let j in attr_list){
                    newArr.push(attr_list[j]);
                }
            }
            // console.log(newArr);
            for(let h in newArr){
                let attr_group_name = newArr[h].attr_group_name;
                attr_group_name_list.push(attr_group_name)
            }
            attr_group_name_list = this.distinct(attr_group_name_list);
            let all_attr = [];
            for(let k in attr_group_name_list){
                let obj = {attr_group_name:attr_group_name_list[k],attr_name:'',attr_name_list:[]};
                for(let x in newArr){
                    if(newArr[x].attr_group_name == attr_group_name_list[k]){
                        obj.attr_name_list.push(newArr[x].attr_name)
                        obj.attr_name_list = that.distinct( obj.attr_name_list)
                    }
                }
                all_attr.push(obj)
            }
            // console.log(all_attr);
            this.goodsAttrList = all_attr
        },
        //数组去重
        distinct (arr) {
            let newArr = []
            for(let i = 0; i < arr.length; i++) {
                if(!newArr.includes(arr[i])) {
                    newArr.push(arr[i])
                }
            }
            return newArr
        },
        async getClass(){
            let res = await this.$Http.getOneClassList()
            if(res.length!=0){
                this.oneClassList = res
            }else{
                this.oneClassList = []
            }
        },
        submitForm(formName) {
            // console.log(formName)
            this.$refs[formName].validate((valid) => {
                // console.log(valid)
                if (valid) {
                    // console.log(this.ruleForm)
                    if(this.ruleForm){
                        if(this.ruleForm.headImgUrl == '' || this.ruleForm.headImgUrl == 'undefined'){
                            this.$message.err('请选择商品缩略图')
                            return false
                        }
                        if(this.ruleForm.bannerImgList.length == 0){
                            this.$message.err('请选择商品展示图')
                            return false
                        }
                        if(this.ruleForm.contentImgList.length == 0){
                            this.$message.err('请选择商品详情图')
                            return false
                        }
                    }
                    if(this.attrs.length == 0){
                        this.$message.warning('请填写商品属性！');
                        return false
                    }
                    if(this.attrs.length != 0){
                        for(let i in this.attrs){
                            if(!this.attrs[i].img){
                                this.$message.warning('请上传属性图片！')
                                return false
                            }
                        }
                    }
					this.isDisabled = true;
                    this.operationGoods()
                } else {
                    return false;
                }
            });
        },
        async operationGoods(){
            let data = {}
			let that = this;
            let attr = this.attrs;
            // console.log(attr);
            if(this.mainType == 1){
                data = {
                    product_name: this.ruleForm.goodsName,
                    title: this.ruleForm.subGoodsName,
                    one_class_id: this.ruleForm.oneClass,
                    two_class_id: this.ruleForm.twoClass,
                    head_img: this.ruleForm.headImgUrl,
                    top_img: this.ruleForm.bannerImgList,
                    content_img: this.ruleForm.contentImgList,
                    price: this.ruleForm.price,
                    old_price: this.ruleForm.old_price,
                    supplier_id: this.$store.state.supplier_id,
                    unit:this.ruleForm.unit,
					qz:this.ruleForm.qz,
                    one_fx_price:this.ruleForm.one_fx_price,
                    two_fx_price:this.ruleForm.two_fx_price,
                    video:this.ruleForm.video,
                    profit_sharing:this.ruleForm.profit_sharing
                }

            }else{
                data = {
                    id: this.goodsId,
                    product_name: this.ruleForm.goodsName,
                    title: this.ruleForm.subGoodsName,
                    one_class_id: this.ruleForm.oneClass,
                    two_class_id: this.ruleForm.twoClass,
                    head_img: this.ruleForm.headImgUrl,
                    top_img: this.ruleForm.bannerImgList,
                    content_img: this.ruleForm.contentImgList,
                    price: this.ruleForm.price,
                    old_price: this.ruleForm.old_price,
                    supplier_id: this.$store.state.supplier_id,
                    unit:this.ruleForm.unit,
					qz:this.ruleForm.qz,
                    one_fx_price:this.ruleForm.one_fx_price,
                    two_fx_price:this.ruleForm.two_fx_price,
                    video:this.ruleForm.video,
                    profit_sharing:this.ruleForm.profit_sharing
                }
            }
            let res = await this.$Http.operationGoods({
                type: this.mainType,
                pro: data,
                attr:JSON.stringify(attr)
            })
            // console.log(res)
            if(res.code == 1){
                if(this.removeVideoUrl) {
                    this.delUploadFile(this.removeVideoUrl)
                }
                this.$message({
                    type: 'success',
                    message: this.mainType==1?'新增商品成功':'修改商品成功!',
                });
				that.isDisabled =false;
                this.$router.go(-1);
            }
        },
        oneClassChange(value){
            this.getTwoClass(value)
        },
        async getTwoClass(id){
            let res = await this.$Http.getTwoClassList({two_class_id: id})
            if(res.length){
                this.twoClassList = res
            }else{
                this.twoClassList = []
            }
        },

        headSuccess(response, file){
            console.log(response, file)
            this.ruleForm.headImgUrl = response
            this.$message({
                type: 'success',
                message: '上传图片成功'
            });
        },
        headError(err, file, fileList){//图片上传失败调用
            console.log(err, file, fileList)
            this.$message.error('上传图片失败!');
        },
        //上传前回调
        beforeUploadVideo(file) {
            var fileSize = file.size / 1024 / 1024 < 10;
            if (['video/mp4'].indexOf(file.type) == -1) {
                this.$message.info("请上传正确的视频格式");
                return false;
            }
            if (!fileSize) {
                this.$message.info("视频大小不能超过10MB");
                return false;
            }
            this.isShowUploadVideo = false;
        },
        //进度条
        uploadVideoProcess(event, file) {
            // console.log(fileList);
            this.videoFlag = true;
            this.videoUploadPercent = file.percentage.toFixed(0) * 1;
        },
        //上传成功回调
        handleVideoSuccess(res, file) {
            // console.log(res,file);
            this.isShowUploadVideo = true;
            this.videoFlag = false;
            this.videoUploadPercent = 0;
            //前台上传地址
            if (file.status == 'success' ) {
                this.ruleForm.video = file.response;
            } else {
                this.$message.info("上传失败，请重新上传");
            }
        },
        // 删除时触发
        removeVideo(file, fileList) {
            console.log(file, fileList)
        },
        // 删除视频
        delVideo() {
            const videoUrlArr = this.ruleForm.video.split('/')
            this.removeVideoUrl = videoUrlArr[videoUrlArr.length - 1]
            // console.log(this.removeVideoUrl);
            this.ruleForm.video = ''
            this.visible = false
        },
        bannerBeforeUpload(file){
            console.log(file);
            if(file.type.split('/')[0] == 'image'){
                console.log('img');
            }
            if(file.type.split('/')[0] == 'video'){
                console.log('video');
                var fileSize = file.size / 1024 / 1024 < 10;
                if (['video/mp4'].indexOf(file.type) == -1) {
                    this.$message.info("请上传正确的视频格式");
                    return false;
                }
                if (!fileSize) {
                    this.$message.info("视频大小不能超过10MB");
                    return false;
                }
            }
        },
        bannerSuccess(response, file, fileList){
            console.log(response, file, fileList)
            console.log(fileList);
            let disposeFile = this.$util.disposeFile(fileList)
            console.log(disposeFile);
            this.ruleForm.bannerImgList = disposeFile
            this.$message({
                type: 'success',
                message: '上传图片成功'
            });
        },
        bannerPreview(file){
            console.log(file)
            this.bannerImageUrl = file.response;
            this.bannerVisible = true;
        },
        bannerRemove(file, fileList){
            let disposeFile = this.$util.disposeFile(fileList)
            this.ruleForm.bannerImgList = disposeFile
        },
        bannerExceed(files, fileList) {//图片上传超过数量限制
            this.$message.error('上传图片数量不能超过5张!');
            console.log(files,fileList)
        },
        bannerError(err, file, fileList){//图片上传失败调用
            console.log(err, file, fileList)
            this.$message.error('上传图片失败!');
        },
        contentSuccess(response, file, fileList){
            console.log(response, file, fileList)
            let disposeFile = this.$util.disposeFile(fileList)
            this.ruleForm.contentImgList = disposeFile
            this.$message({
                type: 'success',
                message: '上传图片成功'
            });
        },
        contentPreview(file){
            console.log(file)
            this.contentImageUrl = file.response;
            this.contentVisible = true;
        },
        contentRemove(file, fileList){
            let disposeFile = this.$util.disposeFile(fileList)
            this.ruleForm.contentImgList = disposeFile
        },
        contentError(err, file, fileList){//图片上传失败调用
            console.log(err, file, fileList)
            this.$message.error('上传图片失败!');
        },
        onEditorChange(editor){
            console.log(editor)
        }, // 内容改变事件
        goBack(){
            this.$router.go(-1);
        },
        accept(){
            let status = 2;
            this.$confirm('此操作将通过该商品审核, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'success'
            }).then(() => {
                this.operationStatus(status)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        refuse(){
            let status = 3;
            this.$confirm('此操作将拒绝该商品审核, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.operationStatus(status)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //修改商品状态
        async operationStatus(status){
            let res = await this.$Http.operationGoodsStatus({
                id:this.goodsId,
                status:status
            })
            console.log(res);
            if(res.code == 200){
                this.$message.success('操作成功！')
                this.$router.go(-1)
            }
        },
        async delUploadFile(fileName) {
            let res = await  this.$Http.delUploadFile({
                object: fileName
            })
            console.log(res)
        }

    }
}
</script>

<style>
    .avatar-uploader-icon01{
        font-size:14px;
        color:#8c939d;
        width:50px;
        height:50px;
        line-height:50px;
        text-align:center
    }
    .avatar01{
        width: 50px;
        height:50px;
        display: block;
    }
    table{
        border-collapse: collapse;
        margin: 0 auto;
        text-align: center;
        width: 80%;
        margin-bottom: 40px;
        font-size: 14px;
    }
    table td, table th{
        border: 1px solid #cad9ea;
        color: #666;
        height: 30px;
    }
    table thead th {
        background-color: #b3d8ff;
        width: 100px;
    }
    table tr:nth-child(odd){
        background: #fff;
    }
    table tr:nth-child(even){
        background: #ecf5ff;
    }
    .demo-ruleForm{
        width: 100%;
        background: white;
        margin-top: 20px;
        padding: 20px 0;
        box-sizing: border-box;
    }
    .input{
        width: 50%
    }
    .add-attr{
        margin-left: 10px;
    }
    .mt{
        margin-top: 5px;
    }
    .box{
        width: 100%;
        height:50px;
        background-color: #3a8ee6;
    }
    /* .quill-editor{
        margin: 0 20px 20px 0;
    } */
</style>
